<template>
  <div class="out">
    <div class="head">
      <div class="h-head">
        <img @click="$router.back(-1)" src="@/assets/hy.png" alt />
        <div>币种</div>
      </div>
    </div>
    <div class="serach">
      <img src="../../assets/ssk.png" alt />
      <input type="text" class="m-input" placeholder="搜索" />
    </div>
    <div class="list">
      <div class="block" v-for="item in bzs" :key="item.id" @click="getName()">{{item.bz}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bzs: [{ bz: "USDT" }, { bz: "ETH" }, { bz: "USDT" }, { bz: "ETH" }]
    };
  },

  created: function() {},
  mounted() {},
  methods: {
    getName() {
      //获取点击对象
      var el = event.currentTarget;
      this.$store.commit("setName", el.innerHTML);
      this.$router.push("/transfer");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
::-webkit-input-placeholder {
  color: #ccc;
  font-size: 0.32rem;
}
:-ms-input-placeholder {
  color: #ccc;
  font-size: 0.32rem;
}
:-o-input-placeholder {
  color: #ccc;
  font-size: 0.32rem;
}
.out {
  height: 100%;
  background: #fff;
  .head {
    height: 1.346667rem;
    background: #fff;
    box-shadow: 0px 2px 1px 0px rgba(36, 36, 36, 0.26);
    opacity: 0.96;
    .f-flex();
    .h-head {
      .f-flex();
      width: 100%;
      justify-content: center;
      height: 2.133333rem;
      position: relative;
      img {
        left: 0.226667rem;
        width: 0.226667rem;
        height: 0.373333rem;
        position: absolute;
      }
      div {
        width: 100%;
        text-align: center;
        font-size: 0.4rem;
        color: #000;
        font-weight: bold !important;
      }
    }
  }
  .serach {
    width: 9.2rem;
    height: 0.68rem;
    border-radius: 0.68rem;
    border: 1px solid #ccc;
    margin: auto;
    margin-top: 0.573333rem;
    .f-flex();
    .m-input {
      background: transparent;
      color: #e6e6e6;
      font-size: 0.32rem;
      width: 6rem;
      padding-left: .533333rem;
    }
    img {
      width: 0.32rem;
      height: auto;
      margin-left: 0.266667rem;
      margin-right: 0.213333rem;
    }
  }
  .list {
    margin-top: .533333rem;
    .block {
      height: 1.04rem;
      border-bottom: 1px solid #f3f1f1;
      margin-left: .373333rem;
      margin-right: .373333rem;
      padding-left: 0.373333rem;
      .f-flex();
      color: #000;
      font-weight: bold!important;
    }
  }
}
</style>

